<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body, html {
            font-size: 12px;
        }
    </style>
</head>
<body>

<select id="province" onchange="provinceChange(this.options[this.options.selectedIndex].value)"></select>
<select id="city" onchange="cityChange(this.options[this.options.selectedIndex].value)"></select>
<select id="area"></select>

<script src="province.js"></script>
<script src="city.js"></script>
<script src="area.js"></script>
<script>
    alert("省:" + provinceArr.length + " 市:" + cityArr.length + " 区:" + areaArr.length);
    //省默认数据
    var provinceSelect = document.getElementById("province");
    for (var i = 0; i < provinceArr.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value", provinceArr[i].id);
        option.appendChild(document.createTextNode(provinceArr[i].name));
        provinceSelect.appendChild(option);
    }
    //js change 事件
    var provinceEv = document.createEvent("HTMLEvents");
    provinceEv.initEvent("change", false, true);
    provinceSelect.dispatchEvent(provinceEv);

    //省级联
    function provinceChange(id) {
        var citySelect = document.getElementById("city");
        citySelect.options.length = 0;
        for (var i = 0; i < cityArr.length; i++) {
            if (cityArr[i].pid === id) {
                var option = document.createElement("option");
                option.setAttribute("value", cityArr[i].id);
                option.appendChild(document.createTextNode(cityArr[i].name));
                citySelect.appendChild(option);
            }
        }
        var cityEv = document.createEvent("HTMLEvents");
        cityEv.initEvent("change", false, true);
        citySelect.dispatchEvent(cityEv);
    }

    //市级联
    function cityChange(id) {
        var areaSelect = document.getElementById("area");
        areaSelect.options.length = 0;
        for (var i = 0; i < areaArr.length; i++) {
            if (areaArr[i].pid === id) {
                var option = document.createElement("option");
                option.setAttribute("value", areaArr[i].id);
                option.appendChild(document.createTextNode(areaArr[i].name));
                areaSelect.appendChild(option);
            }
        }
    }
</script>

</body>
</html>